<template>
	<div :class="['app-editor-container', 'app-slider', `app-slider-${name}`]">
		<a-slider
			class="app-slider-slider"
			:value="curValue"
			:min="min"
			:max="max"
			:step="step"
			:range="range"
			:dots="showStops"
			:disabled="disabled || readOnly"
			@change="onChange"
		/>
		<a-form-item-rest v-if="showInput && !range">
			<a-input-number
				class="app-slider-number-input"
				v-model:value="curValue"
				:min="min"
				:max="max"
				:controls="false"
				@change="onChange"
			/>
		</a-form-item-rest>
	</div>
</template>

<script setup lang="ts">
import { Ref } from 'vue';
import { IEvent } from '@/core';
import { sliderProps } from './slider';
import { FormItemRest } from 'ant-design-vue';
import { useEditorTypeParams } from '@/hooks/use-editor';
interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const props = defineProps(sliderProps);
const emit = defineEmits<EditorEmit>();
// 类型校验
const { validateConfig, valueType, valueSeparator } = useEditorTypeParams();
validateConfig();
const curValue: Ref<any> = computed(() => {
	if (props.range) {
		//使用范围滑动条
		if (Array.isArray(props.value)) {
			return props.value;
		} else if (typeof props.value === 'string') {
			return props.value.split(valueSeparator || ',');
		} else {
			return [0, 0];
		}
	} else {
		if (!props.value) {
			return 0;
		} else {
			return props.value;
		}
	}
});
const onChange = (value: any) => {
	let _value = value;
	if (props.range && valueType === 'SIMPLE') {
		_value = value.join(valueSeparator || ',');
	}
	emit('component-action', {
		name: `${props.name}`,
		action: 'valueChange',
		data: _value,
	});
};
</script>
